<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				padding: 0;
				margin: 0;
			}
			.box{
				width: 100px;
				height: 80px;
				background: blue;
				transform: translateX(50px);
				border: 1px solid red;
				padding: 5px;
			}
		</style>
	</head>
	<body>
		<ul>
			<li>01</li>
			<li>02</li>
			<li id="li03" style="font-size: 50px;">03</li>
			<li>04</li>
			<li>05</li>
		</ul>
		<input type="checkbox" name="" id="" checked="checked"/>
		<div class="box"></div>
		<script src="jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			//提问 .div #span 和#div .span哪个效率更高
			  //第一个
			//选择器
			//$("li") 返回的是一个jq对象（类似数组的形式）
			//在使用jq的方法时候要注意，因为jq内置一些遍历的方法,方法调用可能会影响多个页面元素
			console.log($("#li03"))
			
			
			//支持css3
			//包括关系选择器、伪类伪对象选择器
			console.log($("body>ul>li:nth-of-type(2)"))
			
			//:odd 奇数      :even  偶数        从0开始数
			//:gt  大于   :lt小于
			console.log($("body>ul>li:gt(1)").css({"color":"red"}))
			
			
			//jq 的方法，很多都是用参数的个数来控制  具体的功能
			//attr(属性名，属性值)    只有一个参：获取功能，     两个参：设置功能
			console.log("attr:",$("#li03").attr("style"))
			$("#li03").attr("style","font-size: 80px;")
			
			//移除属性
			$("#li03").removeAttr("style")
			
			
			var obj ={
				element:document.querySelector("ul"),
				attr: function(name,value){
					if(arguments.length==1){
						return this.element.getAttribute(name)
					}
					if (arguments.length==2) {
						 return this.element.setAttribute(name,value)
					}
				}
			}
			
			
			//attr  页面元素的属性  而不是 交互后改变的状态(属性)
			console.log("checked",$('input:checkbox').attr("checked"))
			
			//prop  获取属性  可以随页面元素改变而改变
			console.log("checkbox prop:",$('input:checked').prop("checked"))
			
			//移除属性  		尽可能不要移除原生的属性
			
			//获取   可以传字符串获取一个   可以传数组获取包含多个属性的对象
			console.log($(".box").css(["width","background","transform"]))
			
			//设置  传入对象  以键值对方式设置属性和值
			$(".box").css({
				"width":"200px",
				"background":"red"
			})
		
			//添加和移除类名
			$(".box").addClass("test test1").removeClass("test1")
			
			//切换类名    有act就删掉  没有就添加
			$(".box").toggleClass("act")
			//是否拥有类名   返回布尔值
			$(".box").hasClass("act")
			
			
			//outerHeight 是算上border   innerHeight 不算border   height是只内部内容 不算padding
			console.log("height",$(".box").height())
			console.log("innerheight",$(".box").innerHeight())
			console.log("outerheight",$(".box").outerHeight())
		</script>
	</body>
</html>
